<template>
  <div class="mt-40 w-full">
    <div class="container mx-auto md:w-3/4">
      <div class="flex items-center">
        <h2 class="text-3xl font-bold">项目展示</h2>
        <div @mouseover="LearnMore0=true" @mouseleave="LearnMore0=false" class="ml-auto">
          <button :class="{'bg-green-400':LearnMore0}" class="transition duration-300 ease-in-out transform hover:scale-105  border-gray-200 border-2 h-8 w-14 rounded-full flex justify-center items-center">
            <svg class="w-4 h-4 text-gray-400 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
            </svg>
          </button>
        </div>
      </div>
      <div class="mx-auto mt-24 flex flex-col space-y-8">
        <div class="flex space-x-12">
          <div @mouseover="LearnMore1=true" @mouseleave="LearnMore1=false" class="flex-1 relative transition-transform transform-gpu hover:scale-105 border-gray-400 shadow-lg h-80 w-1/4 bg-cover bg-center bg-[url('@/assets/images/img27.jpg')]">
            <div class="flex items-center">
              <div class="flex absolute bottom-0 min-h-[30%] w-full" :class="{'bg-white':LearnMore1}">
                <h5 class="ml-8 mt-6 text-2xl font-bold tracking-tight text-gray-900" v-if="LearnMore1">项目标题</h5>
                <div class="ml-auto mr-10">
                  <button v-if="LearnMore1" class="mt-8 w-6 h-6 flex items-center justify-center bg-green-400 text-black rounded-full transition duration-300 ease-in-out transform hover:scale-105">
                    <svg class="rtl:rotate-180 w-4 h-4 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
                      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
                    </svg>
                  </button>
                </div>
              </div>
            </div>
          </div>
          <div @mouseover="LearnMore2=true" @mouseleave="LearnMore2=false" class="flex-1 relative transition-transform transform-gpu hover:scale-105 border-gray-400 shadow-lg h-80 w-1/4 bg-cover bg-center bg-[url('@/assets/images/img22.jpg')]">
            <div class="flex items-center">
              <div class="flex absolute bottom-0 min-h-[30%] w-full" :class="{'bg-white':LearnMore2}">
                <h5 class="ml-8 mt-6 text-2xl font-bold tracking-tight text-gray-900" v-if="LearnMore2">项目标题</h5>
                <div class="ml-auto mr-10">
                  <button v-if="LearnMore2" class="mt-8 w-6 h-6 flex items-center justify-center bg-green-400 text-black rounded-full transition duration-300 ease-in-out transform hover:scale-105">
                    <svg class="rtl:rotate-180 w-4 h-4 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
                      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
                    </svg>
                  </button>
                </div>
              </div>
            </div>
          </div>
          <div @mouseover="LearnMore3=true" @mouseleave="LearnMore3=false" class="flex-1 relative transition-transform transform-gpu hover:scale-105 border-gray-400 shadow-lg h-80 w-1/4 bg-cover bg-center bg-[url('@/assets/images/img23.jpg')]">
            <div class="flex items-center">
              <div class="flex absolute bottom-0 min-h-[30%] w-full" :class="{'bg-white':LearnMore3}">
                <h5 class="ml-8 mt-6 text-2xl font-bold tracking-tight text-gray-900 dark:text-white" v-if="LearnMore3">项目标题</h5>
                <div class="ml-auto mr-10">
                 <button v-if="LearnMore3" class="mt-8 w-6 h-6 flex items-center justify-center bg-green-400 text-black rounded-full transition duration-300 ease-in-out transform hover:scale-105">
                   <svg class="rtl:rotate-180 w-4 h-4 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
                     <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
                   </svg>
                 </button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="flex space-x-12">
          <div @mouseover="LearnMore4=true" @mouseleave="LearnMore4=false" class="flex-1 relative transition-transform transform-gpu hover:scale-105 border-gray-400 shadow-lg h-80 w-1/4 bg-cover bg-center bg-[url('@/assets/images/img24.jpg')]">
            <div class="flex items-center">
              <div class="flex absolute bottom-0 min-h-[30%] w-full" :class="{'bg-white':LearnMore4}">
                <h5 class="ml-8 mt-6 text-2xl font-bold tracking-tight text-gray-900 dark:text-white" v-if="LearnMore4">项目标题</h5>
                <div class="ml-auto mr-10">
                  <button v-if="LearnMore4" class="mt-8 w-6 h-6 flex items-center justify-center bg-green-400 text-black rounded-full transition duration-300 ease-in-out transform hover:scale-105">
                    <svg class="rtl:rotate-180 w-4 h-4 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
                      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
                    </svg>
                  </button>
                </div>
              </div>
            </div>
          </div>
          <div @mouseover="LearnMore5=true" @mouseleave="LearnMore5=false" class="flex-1 relative transition-transform transform-gpu hover:scale-105 border-gray-400 shadow-lg h-80 w-1/4 bg-center bg-[url('@/assets/images/img25.jpg')]">
            <div class="flex items-center">
              <div class="flex absolute bottom-0 min-h-[30%] w-full" :class="{'bg-white':LearnMore5}">
                <h5 class="ml-8 mt-6 text-2xl font-bold tracking-tight text-gray-900 dark:text-white" v-if="LearnMore5">项目标题</h5>
                <div class="ml-auto mr-10">
                  <button v-if="LearnMore5" class="mt-8 w-6 h-6 flex items-center justify-center bg-green-400 text-black rounded-full transition duration-300 ease-in-out transform hover:scale-105">
                    <svg class="rtl:rotate-180 w-4 h-4 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
                      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
                    </svg>
                  </button>
                </div>
              </div>
            </div>
          </div>
          <div @mouseover="LearnMore6=true" @mouseleave="LearnMore6=false" class="flex-1 relative transition-transform transform-gpu hover:scale-105 border-gray-400 shadow-lg h-80 bg-cover bg-center bg-[url('@/assets/images/img26.jpg')]">
            <div class="flex items-center">
              <div class="flex absolute bottom-0 min-h-[30%] w-full" :class="{'bg-white':LearnMore6}">
                <h5 class="ml-8 mt-6 text-2xl font-bold tracking-tight text-gray-900 dark:text-white" v-if="LearnMore6"> 项目标题</h5>
                <div class="ml-auto mr-10">
                  <button v-if="LearnMore6" class="mt-8 w-6 h-6 flex items-center justify-center bg-green-400 text-black rounded-full transition duration-300 ease-in-out transform hover:scale-105">
                    <svg class="rtl:rotate-180 w-4 h-4 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
                      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
                    </svg>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>

export default {
  data() {
    return {
      LearnMore0:false,
      LearnMore1:false,
      LearnMore2:false,
      LearnMore3:false,
      LearnMore4:false,
      LearnMore5:false,
      LearnMore6:false,
    };
  },
};
</script>
